<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-02-10 16:26:27
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-02-10 16:27:55
-->
<template>
  <div class="Main">
    <div class="MainTitle">药品详情</div>
    <div class="MianContent">
      <div class="formContent">
        <h2>药品基本信息</h2>
        <div>
          <a-form-model
            ref="ruleForm"
            :rules="rules"
            :model="form"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <div class="formBox">
              <a-form-model-item label="药品分类">
                <!-- <a-cascader
                  :options="cateList"
                  v-model="form.cateId"
                  :fieldNames="fieldNames"
                  placeholder="选择药品分类"
                  @change="onChangeCate"
                /> -->
                <el-cascader
                  style="width: 100%;"
                  disabled
                  clearable
                  v-model="form.cateId"
                  :options="cateList"
                  :props="fieldNames"
                  @change="onChangeCate">
                </el-cascader>
              </a-form-model-item>
              <a-form-model-item label="药品名称" prop="title">
                <a-input v-model="form.title" readOnly placeholder="请输入药品名称" />
              </a-form-model-item>
              <a-form-model-item label="药品品牌">
                <a-select
                  allowClear
                  show-search
                  disabled
                  v-model="form.brand_id"
                  placeholder="输入品牌搜索"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="null"
                  @search="handleSearch"
                >
                  <a-select-option v-for="d in ProductBrand" :key="d.id">
                    {{ d.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="药品编码" prop="code">
                <a-input v-model="form.code" readOnly placeholder="请输入药品编码" />
              </a-form-model-item>

              <a-form-model-item label="条形码编号" prop="bar_code">
                <a-input v-model="form.bar_code" readOnly placeholder="请输入条形码编号" />
              </a-form-model-item>
              <a-form-model-item label="药品批号" prop="batch_no">
                <a-input v-model="form.batch_no" readOnly placeholder="请输入药品批号" />
              </a-form-model-item>

              <a-form-model-item label="药品简介" prop="synopsis">
                <a-textarea
                  placeholder="请输入药品简介，最长50字！"
                  :maxLength="50"
                  v-model="form.synopsis"
                  readOnly
                  :rows="4"
                />
              </a-form-model-item>
              <a-form-model-item label="药品卖点" prop="sell_point">
                <a-textarea
                  placeholder="药品卖点，最长80字！"
                  v-model="form.sell_point"
                  :maxLength="80"
                  readOnly
                  :rows="4"
                />
              </a-form-model-item>
            </div>
            <a-form-model-item label="药监类目" style="width: 50%">
              <a-radio-group name="radioGroup" disabled v-model="form.drug_type">
                <a-radio :value="1"> 普通药品 </a-radio>
                <a-radio :value="2"> 保健品 </a-radio>
                <a-radio :value="3"> 医疗器械 </a-radio>
                <a-radio :value="4"> 中药类 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label="药品类别"
              style="width: 50%"
              prop="category"
              disabled
            >
              <a-checkbox-group v-model="form.category" disabled>
                <a-checkbox value="1">高毛</a-checkbox>
                <a-checkbox value="2">热销</a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
            <a-form-model-item
              label="计量规格"
              style="width: 50%"
              prop="meter_spec"
            >
              <a-input
                style="width: 100px"
                type="number"
                readOnly
                v-model="form.meter_spec"
                placeholder="请输入数量"
              ></a-input
              >（数量）
              <a-input
                v-model="form.medium_pack_spec"
                style="width: 130px; margin-left: 15px"
                readOnly
                placeholder="如：12盒"
              ></a-input
              >（中包装规格）
            </a-form-model-item>
            <a-form-model-item
              label="药品规格"
              style="width: 50%"
              prop="spec_unit"
            >
              <a-input
                style="width: 100px"
                v-model="form.spec_unit"
                readOnly
                placeholder="如：盒"
              ></a-input
              >（单位）
              <a-input
                v-model="form.spec_volume"
                style="width: 130px; margin-left: 15px"
                placeholder="如：250ml、24片"
                readOnly
              ></a-input
              >（容量规格）
            </a-form-model-item>
            <a-form-model-item label="基药分类" style="width: 50%">
              <a-radio-group name="radioGroup" disabled v-model="form.base_type">
                <a-radio :value="1"> 基药类 </a-radio>
                <a-radio :value="2"> 非基药类 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div class="business">
              <a-form-model-item
                label="经营范围"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
                prop="business_scope"
              >
                <a-checkbox-group disabled v-model="form.business_scope">
                  <a-checkbox
                    :value="item.id"
                    v-for="(item, index) in natureBusiness"
                    :key="index"
                    >{{ item.name }}</a-checkbox
                  >
                </a-checkbox-group>
              </a-form-model-item>
            </div>
            <div class="formBox">
                <a-form-model-item label="购买限制数量" prop="buy_limit">
                  <a-input v-model="form.buy_limit" readOnly type="number" placeholder="请输入购买限制数量" />
                </a-form-model-item>
            </div>
            <div class="skuBox">
              <a-form-model-item label="分佣比例" prop="commission_rate">
                <a-input v-model="form.commission_rate" type="number" placeholder="请输入分佣比例" />
              </a-form-model-item>

              <a-form-model-item label="比例" prop="rate">
                <a-input
                  v-model="form.rate"
                  type="number"
                  @input="changeRate"
                  @blur="rulesRate"
                  placeholder="请输入药品比例（1-100%）"
                />
              </a-form-model-item>
            </div>

            <div class="skuBox">
              <a-form-model-item label="售价" prop="sale_price">
                <a-input
                  v-model="form.sale_price"
                  type="number"
                  placeholder="请输入药品售价"
                />
              </a-form-model-item>
              <a-form-model-item label="原价" prop="primary_price">
                <a-input
                  v-model="form.primary_price"
                  type="number"
                  placeholder="请输入药品原价"
                />
              </a-form-model-item>
              <a-form-model-item label="供应价" prop="cost_price">
                <a-input
                  v-model="form.cost_price"
                  type="number"
                  @input="changeCostPrice"
                  placeholder="请输入药品供应价"
                />
              </a-form-model-item>
              <a-form-model-item label="库存" prop="num">
                <a-input
                  v-model="form.num"
                  type="number"
                  @input="changeNum"
                  placeholder="请输入药品库存"
                />
              </a-form-model-item>
              <a-form-model-item label="供应商销售经理分佣" prop="sale_manager_rate" :labelCol="{span: 7, offset: 0}">
                <a-input v-model="form.sale_manager_rate" type="number" placeholder="请输入销售经理分佣比例" />
              </a-form-model-item>
              <a-form-model-item label="供应商销售代表分佣" prop="sale_reps_rate" :labelCol="{span: 7, offset: 0}">
                <a-input v-model="form.sale_reps_rate" type="number" placeholder="请输入销售代表分佣比例" />
              </a-form-model-item>
              <a-form-model-item label="优惠政策" prop="full_reduce_limit">
                <div class="flex">
                  <a-input
                      addon-before="满"
                      v-model="form.full_reduce_limit"
                      type="number"
                      @input="changeSalePrice"
                      placeholder="满减金额"
                      style="width:150px"
                    />
                    <a-input
                      addon-before="减"
                      v-model="form.full_reduce_amount"
                      type="number"
                      @input="changeSalePrice"
                      placeholder="减免金额"
                      style="width:150px"
                    />
                </div>
              </a-form-model-item>
              <a-form-model-item label="优惠说明" prop="discount_desc">
                <a-input
                  v-model="form.discount_desc"
                  type="text"
                  placeholder="请输入优惠说明"
                />
              </a-form-model-item>
              
            </div>

            <!-- 药品属性 -->
            <div class="goodsAttribute">
              <h2>药品属性</h2>
              <a-form-model-item
                label="特殊要求"
                style="width: 50%"
                prop="special_request"
              >
                <a-checkbox-group disabled v-model="form.special_request">
                  <a-checkbox value="1">是否中药保护</a-checkbox>
                  <a-checkbox value="2">是否进口药品</a-checkbox>
                  <a-checkbox value="3">购买时是否需要提交处方笺</a-checkbox>
                </a-checkbox-group>
              </a-form-model-item>
              <a-form-model-item label="处方/非处方药" style="width: 50%">
                <a-radio-group name="radioGroup" disabled v-model="form.recipe_type">
                  <a-radio :value="1"> RX </a-radio>
                  <a-radio :value="2"> 甲类OTC </a-radio>
                  <a-radio :value="3"> 乙类OTC </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <div class="formBox">
                <a-form-model-item label="批准文号" prop="approval_no">
                  <a-input v-model="form.approval_no" readOnly placeholder="必填" />
                </a-form-model-item>
                <a-form-model-item label="生产厂家" prop="manufacturer">
                  <a-input v-model="form.manufacturer" readOnly placeholder="必填" />
                </a-form-model-item>
                <!-- <a-form-model-item label="产品规格" prop="spec">
                  <a-input v-model="form.spec" placeholder="必填" />
                </a-form-model-item> -->
                <a-form-model-item label="剂型" prop="dosage_form">
                  <a-input v-model="form.dosage_form" readOnly placeholder="必填" />
                </a-form-model-item>
                <a-form-model-item label="GMP认证情况">
                  <a-select v-model="form.is_gmp" disabled placeholder="是否认证">
                    <a-select-option :value="0"> 未认证 </a-select-option>
                    <a-select-option :value="1"> 已认证 </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item label="产品单位" prop="production_unit">
                  <a-input v-model="form.production_unit" readOnly placeholder="必填" />
                </a-form-model-item>
                <a-form-model-item label="批准日期">
                  <a-input
                    readOnly
                    v-model="form.approval_date"
                    placeholder="请输入批准日期"
                  />
                </a-form-model-item>
                <a-form-model-item label="通用名称">
                  <a-input v-model="form.generic_name" readOnly placeholder="非必填" />
                </a-form-model-item>
                <a-form-model-item label="药品本位码">
                  <a-input v-model="form.standard_code" readOnly placeholder="非必填" />
                </a-form-model-item>
                <!-- <a-form-model-item label="英文名称">
                  <a-input v-model="form.name" placeholder="非必填" />
                </a-form-model-item> -->
                <a-form-model-item label="产地" prop="production_address">
                  <a-input
                    readOnly
                    v-model="form.production_address"
                    placeholder="必填"
                  />
                </a-form-model-item>
                <a-form-model-item label="拼音首字母">
                  <a-input v-model="form.pinyin_initial" readOnly placeholder="非必填" />
                </a-form-model-item>
                <a-form-model-item label="生产日期">
                  <a-date-picker
                  disabled
                    v-model="form.production_date"
                    :valueFormat="dateFormat"
                    @change="onChangeProductionDate"
                  />
                </a-form-model-item>
                <a-form-model-item label="有效日期">
                  <a-date-picker
                  disabled
                    v-model="form.expire_date"
                    :valueFormat="dateFormat"
                    @change="onChangeExpireDate"
                  />
                </a-form-model-item>
              </div>
            </div>

            <!-- 生产企业资质 -->
            <div class="qualiBox">
              <h2>生产企业资质</h2>
              <div class="formBox">
                <a-form-model-item label="营业执照" prop="business_license">
                  <UploadImage
                    disabled
                    v-model="business_license"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="">
                  <!-- <a-date-picker @change="onChange" /> -->
                </a-form-model-item>
                <a-form-model-item label="生产许可证" prop="production_license">
                  <UploadImage
                    disabled
                    v-model="production_license"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="过期日期">
                  <a-date-picker
                    v-model="form.production_license_date"
                    :valueFormat="dateFormat"
                    @change="onChangeXK"
                  />
                </a-form-model-item>
                <a-form-model-item label="GMP证书">
                  <UploadImage
                    disabled
                    v-model="gmp_certificate"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="">
                  <!-- <a-date-picker @change="onChange" /> -->
                </a-form-model-item>
              </div>
            </div>

            <!-- 药品资质 -->
            <div class="qualiBox">
              <h2>药品资质</h2>
              <div class="formBox">
                <a-form-model-item label="生产批件" prop="production_approval">
                  <UploadImage
                    disabled
                    v-model="production_approval"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="过期日期">
                  <a-date-picker
                    disabled
                    v-model="form.production_approval_date"
                    :valueFormat="dateFormat"
                    @change="onChangeSC"
                  />
                </a-form-model-item>
                <a-form-model-item label="药品质量标准" prop="quality_standard">
                  <UploadImage
                    disabled
                    v-model="quality_standard"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="">
                  <!-- <a-date-picker @change="onChange" /> -->
                </a-form-model-item>
                <a-form-model-item label="说明书" prop="manual">
                  <UploadImage v-model="manual" disabled :maxNum="1"></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="">
                  <!-- <a-date-picker @change="onChange" /> -->
                </a-form-model-item>
                <a-form-model-item label="包装盒及包装备" prop="pack_box">
                  <UploadImage v-model="pack_box" disabled :maxNum="1"></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="">
                  <!-- <a-date-picker @change="onChange" /> -->
                </a-form-model-item>
                <a-form-model-item label="质检报告" prop="inspection_report">
                  <UploadImage
                    disabled
                    v-model="inspection_report"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="过期日期">
                  <a-date-picker
                    disabled
                    v-model="form.inspection_report_date"
                    :valueFormat="dateFormat"
                    @change="onChangeZJ"
                  />
                </a-form-model-item>
                <a-form-model-item
                  label="商标注册证"
                  prop="trademark_certificate"
                >
                  <UploadImage
                    disabled
                    v-model="trademark_certificate"
                    :maxNum="1"
                  ></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="过期日期">
                  <a-date-picker
                    disabled
                    v-model="form.trademark_certificate_date"
                    :valueFormat="dateFormat"
                    @change="onChangeSB"
                  />
                </a-form-model-item>
              </div>
              <!-- <a-form-model-item
                label="说明书"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
              >
                <a-textarea placeholder="说明书" :rows="10" />
              </a-form-model-item> -->
            </div>

            <!-- 药品图片 -->
            <div class="goodsImgBox">
              <h2>药品图片</h2>
              <div style="display: flex">
                <a-form-model-item
                  label="封面图片"
                  style="width: 45%"
                  prop="logo"
                >
                  <UploadImage v-model="logo" disabled :multiple="false" :maxNum="1"></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="商品图片" prop="image">
                  <UploadImage v-model="image" disabled :maxNum="6"></UploadImage>
                </a-form-model-item>
              </div>
            </div>

            <!-- 药品图片 -->
            <div class="goodsImgBox">
              <h2>商品视频</h2>
              <div style="display: flex">
                <a-form-model-item
                  label="商品视频"
                  style="width: 45%"
                  prop="video"
                >
                  <UploadImage Accept="video/*" disabled v-model="video" :maxNum="1"></UploadImage>
                </a-form-model-item>
              </div>
            </div>

            <!-- 产品描述 -->
            <div class="goodsImgBox">
              <h2>产品描述</h2>
              <a-form-model-item
                label="产品描述"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
              >
                <div style="width: 100%; height: 600px">
                  <editor-bar
                  disabled
                    v-model="form.desc"
                    :value="form.desc"
                    :isClear="false"
                  ></editor-bar>
                </div>
              </a-form-model-item>
            </div>

            <!-- 包装清单 -->
            <div>
              <h2>包装清单</h2>
              <a-form-model-item
                label="包装清单"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
              >
                <a-textarea
                  v-model="form.pack_list"
                  placeholder="包装清单"
                  :rows="5"
                  readOnly
                />
              </a-form-model-item>
            </div>

            <!-- 售后服务 -->
            <div>
              <h2>售后服务</h2>
              <a-form-model-item
                label="售后服务"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
              >
                <a-textarea
                  v-model="form.after_service"
                  placeholder="售后服务"
                  :rows="5"
                  readOnly
                />
              </a-form-model-item>
            </div>

            <!-- 智能标签 -->
            <div>
              <h2>智能标签</h2>
              <a-form-model-item
                label="智能标签"
                :wrapperCol="{ span: 24 }"
                style="width: 50%"
              >
                <a-textarea
                  v-model="form.smart_tag"
                  placeholder="在此描述..."
                  readOnly
                  :rows="5"
                />
                <div>
                  添加智能标签，让用户更容易搜到这个药品（每一行添加一种标签）如:
                  <br />1、我感冒了<br />2、感冒用药<br />3、咳嗽用药<br />4、流鼻涕怎么办
                </div>
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="btnBox">
          <el-button type="primary" @click="submitPush">提交申请</el-button>
          <el-button type="info">取消并删除内容</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import EditorBar from "@/components/common/wangEnduit/wangEnduit";
import UploadImage from "@/components/common/Upload";
import {
  GetConfigList,
  GetProductCate,
  getAllCateList,
  GetProductBrandList,
  ShopGoodsAdd,
  ShopGoodsView,
  ShopGoodsEdit,

  StoreShopGoodsView
} from "@/api/api.js";

export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
    EditorBar,
  },
  data() {
    return {
      rules: {
        // title: [
        //   { required: true, message: "请输入药品名称!", trigger: "blur" },
        // ],
        // code: [{ required: true, message: "请输入药品编码!", trigger: "blur" }],
        // synopsis: [
        //   { required: true, message: "请输入药品简介!", trigger: "blur" },
        // ],
        // sell_point: [
        //   { required: true, message: "请输入药品卖点!", trigger: "blur" },
        // ],
        // spec_unit: [
        //   { required: true, message: "请输入药品规格!", trigger: "blur" },
        // ],

        sale_price: [
          { required: true, message: "请输入售价!", trigger: "blur" },
        ],
        primary_price: [
          { required: true, message: "请输入原价!", trigger: "blur" },
        ],
        cost_price: [
          { required: true, message: "请输入供应价!", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入库存!", trigger: "blur" }],

        sale_manager_rate: [{ required: true, message: "请输入供应商销售经理分佣!", trigger: "blur" }],
        sale_reps_rate: [{ required: true, message: "请输入供应商销售代表分佣!", trigger: "blur" }],
        full_reduce_limit: [{ required: true, message: "请输入满减金额!", trigger: "blur" }],
        full_reduce_amount: [{ required: true, message: "请输入减免金额!", trigger: "blur" }],
        discount_desc: [{ required: true, message: "请输入优惠说明!", trigger: "blur" }],
        // rate: [{ required: true, message: "请输入比例!", trigger: "blur" }],

        // business_scope: [
        //   { required: true, message: "请选择经营范围!", trigger: "blur" },
        // ],
        // special_request: [
        //   { required: true, message: "请选择特殊要求!", trigger: "blur" },
        // ],
        // approval_no: [
        //   { required: true, message: "请输入批准文号!", trigger: "blur" },
        // ],
        // manufacturer: [
        //   { required: true, message: "请输入生产厂家!", trigger: "blur" },
        // ],
        // dosage_form: [
        //   { required: true, message: "请输入剂型!", trigger: "blur" },
        // ],
        // production_unit: [
        //   { required: true, message: "请输入产品单位!", trigger: "blur" },
        // ],
        // production_address: [
        //   { required: true, message: "请输入产地!", trigger: "blur" },
        // ],
        // meter_spec: [
        //   { required: true, message: "请输入计量规格!", trigger: "blur" },
        // ],
        // commission_rate: [
        //   { required: true, message: "请输入分佣比例（1-100%）!", trigger: "blur",  pattern: new RegExp(/^([1-9][0-9]{0,1}|100)$/), },
        // ],

        // business_license: [{ type: 'array',  required: true, message: '请上传营业执照!', trigger: 'blur', },],
        // production_license: [{ type: 'array',  required: true, message: '请上传生产许可证!', trigger: 'blur', },],
        // production_approval: [{ type: 'array',  required: true, message: '请上传生产批件!', trigger: 'blur', },],
        // quality_standard: [{ type: 'array',  required: true, message: '请上传药品质量标准!', trigger: 'blur', },],
        // manual: [{ type: 'array',  required: true, message: '请上传说明书!', trigger: 'blur', },],
        // pack_box: [{ type: 'array',  required: true, message: '请上传包装盒及包装备!', trigger: 'blur', },],
        // inspection_report: [{ type: 'array',  required: true, message: '请上传质检报告!', trigger: 'blur', },],
        // trademark_certificate: [{ type: 'array',  required: true, message: '请上传商标注册证!', trigger: 'blur', },],
        // logo: [{ type: 'array',  required: true, message: '请上传封面图片!', trigger: 'blur', },],
        // image: [{ type: 'array',  required: true, message: '请上传商品图片!', trigger: 'blur', },],
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        bar_code:'',//条形码编号
        batch_no:'', //药品批号
        cateId: undefined, //分类id
        title: "", //商品名
        brand_id: "", //药品品牌
        code: "", //编码
        synopsis: "", //简介
        sell_point: "", //药品卖点
        drug_type: 1, //药监类目(1普通药品,2保健品,3医疗器械,4中药类)
        meter_spec: "", //计量规格
        medium_pack_spec: "", //中包装规格
        spec_unit: "", //药品规格（单位）
        spec_volume: "", //药品规格（容量）
        base_type: 1, //基药分类
        business_scope: [], //经营范围
        special_request: [], //特殊要求(1是否中药保护,2是否进口药品,3购买时是否需要提交处方筏)
        recipe_type: 1, //处方类型(1RX,2甲类OTC,3乙类OTC)
        approval_no: "", //批准文号
        manufacturer: "", //生产厂家
        // spec:'',//产品规格
        dosage_form: "", //剂型
        is_gmp: "", //GMP认证情况 0未认证，1已认证
        production_unit: "", //产品单位
        approval_date: "", //批准日期
        generic_name: "", //通用名称
        standard_code: "", //药品本位码
        production_address: "", //产地
        pinyin_initial: "", //拼音首字母
        production_license_date: null, //生产许可证过期日期
        production_approval_date: null, //生产批件过期日期
        inspection_report_date: null, //质检报告过期日期
        trademark_certificate_date: null, //商标注册证过期日期
        desc: "", //产品描述
        pack_list: "", //包装清单
        after_service: "", //售后服务
        smart_tag: "", //智能标签

        sale_price: "", //售价
        primary_price: "", //原价
        cost_price: "", //成本价
        rate_price: "", //比例价
        num: "", //库存
        rate: "", //比例

        production_date: null, //生产日期
        expire_date: null, //有效日期
        category: [], //类别(1高毛,2热销)

        commission_rate:'', //分佣比例

        buy_limit:'', //购买限制数量

        sale_manager_rate:'', //销售经理分佣
        sale_reps_rate:'', //销售代表分佣
        full_reduce_limit:'', //满减金额
        full_reduce_amount:'', //减免金额
        discount_desc:'', //优惠说明
      },

      dateFormat: "YYYY-MM-DD",
      natureBusiness: [], //经营范围
      cateList: [],
      fieldNames: {
        label: "title",
        value: "id",
        children: "sub",
      },
      ProductBrand: "", //品牌数据

      business_license: [], //营业执照
      production_license: [], //生产许可证
      gmp_certificate: [], //GMP证书
      production_approval: [], //生产批件
      quality_standard: [], //药品质量标准
      manual: [], //说明书
      pack_box: [], //包装盒及包装备
      inspection_report: [], //质检报告
      trademark_certificate: [], //商标注册证
      logo: [], //商品图标
      image: [], //商品图片
      video: [], //商品视频
      
      goodsId: null, //商品id
      viewType: null, //进入查看的类型 edit-供应商商品编辑进入，view-商品库商品查看进入
    };
  },
  created() {},
  mounted() {
    const that = this;
    that.goodsId = that.$route.query.id;
    that.GetCateList();
    that.GetTBusinessList();
    that.handleSearch();
    if (that.goodsId) {
      that.GetGoodsDetails();
    }
  },
  methods: {
    // 获取商品详情
    async GetGoodsDetails() {
      const that = this;
      let res = await StoreShopGoodsView({ id: that.goodsId });
      // console.log(res,'res')
      if (res.data.code == 1) {
        let data = res.data.data;
        data.sale_price = '';
        data.primary_price = '';
        data.cost_price = '';
        data.num = '';
        
        that.form = { ...data };

        // that.form.cateId = data.cate_id ? [data.cate_pid, data.cate_id] : [];
        
        if (data.cate_pid && data.cate_id && data.cate_sid) {
          that.form.cateId = [data.cate_pid, data.cate_id, data.cate_sid]

        }else if (data.cate_pid && data.cate_id && !data.cate_sid){
          that.form.cateId = [data.cate_pid, data.cate_id]
          
        }else if (data.cate_pid && data.cate_id){
          that.form.cateId = [data.cate_pid, data.cate_id]

        }else if (data.cate_pid && !data.cate_id){
          that.form.cateId = [data.cate_pid]
          
        }else if (!data.cate_pid && !data.cate_id) {
          that.form.cateId = []
        }



        that.form.category = data.category
          ? data.category.split(",")
          : [];
        that.form.business_scope = data.business_scope
          ? data.business_scope.split(",").map(Number)
          : [];
        that.form.special_request = data.special_request
          ? data.special_request.split(",")
          : [];

        if (data.business_license) {
          //营业执照
          let imgArr = data.business_license.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.business_license = fileArr;
        }

        if (data.production_license) {
          //生产许可证
          let imgArr = data.production_license.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.production_license = fileArr;
        }

        if (data.gmp_certificate) {
          //GMP证书
          let imgArr = data.gmp_certificate.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.gmp_certificate = fileArr;
        }

        if (data.production_approval) {
          //生产批件
          let imgArr = data.production_approval.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.production_approval = fileArr;
        }

        if (data.quality_standard) {
          //质量标准
          let imgArr = data.quality_standard.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.quality_standard = fileArr;
        }

        if (data.manual) {
          //	说明书
          let imgArr = data.manual.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.manual = fileArr;
        }

        if (data.pack_box) {
          //包装盒
          let imgArr = data.pack_box.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.pack_box = fileArr;
        }

        if (data.inspection_report) {
          //质检报告
          let imgArr = data.inspection_report.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.inspection_report = fileArr;
        }

        if (data.trademark_certificate) {
          //商标注册证
          let imgArr = data.trademark_certificate.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.trademark_certificate = fileArr;
        }

        if (data.logo) {
          //logo
          let imgArr = data.logo.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.logo = fileArr;
        }

        if (data.image) {
          //商品图片
          let imgArr = data.image.split(",");
          let fileArr = [];
          imgArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.image = fileArr;
        }

        if (data.video) {
          //商品图片
          let videoArr = data.video.split(",");
          let fileArr = [];
          videoArr.map((item) => {
            fileArr.push({ url: item });
          });
          that.video = fileArr;
        }

      }
      console.log(that.form.cateId);
    },

    // 验证比例输入 计算比例价
    rulesRate() {
      const that = this;
      let reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
      if (!reg.test(that.form.rate * 1)) {
        showError("请输入1-100的正整数！");
        that.form.rate = "";
      }
      // if(that.form.sale_price){
      //   that.form.rate_price = ((that.form.rate*1)/100)*(that.form.sale_price*1) + that.form.sale_price*1
      // }
    },

    // 验证输入
    changeSalePrice() {
      const that = this;
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(that.form.sale_price)) {
        that.form.sale_price = "";
      }
    },
    // 验证输入
    changePrimaryPrice() {
      const that = this;
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(that.form.primary_price)) {
        that.form.primary_price = "";
      }
    },
    // 验证输入
    changeCostPrice() {
      const that = this;
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(that.form.cost_price)) {
        that.form.cost_price = "";
      }
    },
    // 验证输入
    changeNum() {
      const that = this;
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(that.form.num)) {
        that.form.num = "";
      }
    },
    // 验证输入
    changeRate() {
      const that = this;
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(that.form.rate)) {
        that.form.rate = "";
      }
    },

    // 获取经营范围
    async GetTBusinessList() {
      const that = this;
      let res = await GetConfigList({ type: "business_scope" });
      if (res.data.code == 1) {
        let data = res.data.data;
        that.natureBusiness = data;
      } else {
        showError(res.data.msg);
      }
    },
    //过期日期
    onChange1(date, dateString) {
      console.log(date, dateString);
    },

    // 获取分类
    async GetCateList() {
      const that = this;
      let res = await getAllCateList();
      if (res.data.code == 1) {
        let data = res.data.data;
        that.cateList = data;
      } else {
        showError(res.data.msg);
      }
    },
    // 选择分类
    onChangeCate(value) {
      const that = this;
      that.form.cateId = value;
      console.log(value, this.form.cateId);
    },

    // 品牌搜索
    handleSearch(value) {
      const that = this;
      let params = {
        keyword: value,
        page: 1,
        pagesize: 10,
        type:1
      };
      GetProductBrandList(params).then((res) => {
        if (res.data.code == 1) {
          let data = res.data.data;
          that.ProductBrand = data.list;
        } else {
          showError(res.data.msg);
        }
      });
    },

    // 生产日期
    onChangeProductionDate(data, string) {
      const that = this;
      that.form.production_date = string;
    },
    // 有效日期
    onChangeExpireDate(data, string) {
      const that = this;
      that.form.expire_date = string;
    },

    // 选择生产许可证过期日期
    onChangeXK(data, string) {
      const that = this;
      that.form.production_license_date = string;
    },
    // 生产批件过期日期
    onChangeSC(data, string) {
      const that = this;
      that.form.production_approval_date = string;
    },
    // 质检报告过期日期
    onChangeZJ(data, string) {
      const that = this;
      that.form.inspection_report_date = string;
    },
    // 商标注册证过期日期
    onChangeSB(data, string) {
      const that = this;
      that.form.trademark_certificate_date = string;
    },

    // 提交申请按钮
    async submitPush() {
      const user = Vue.ls.get(USER_DATA);
      const that = this;
      that.$refs["ruleForm"].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          let form = that.form;
          let skuList = [
            {
              sale_price: form.sale_price,
              primary_price: form.primary_price,
              cost_price: form.cost_price,
              // rate_price:form.rate_price,
              num: form.num,
              id: that.goodsId && that.form.sku_list?that.form.sku_list[0].id:0
            },
          ];
          if(that.form.full_reduce_amount == ''){
            showError('请输入减免金额')
            return
          }

          let business_license = []; //营业执照
          that.business_license.map((item) => {
            item.url
              ? business_license.push(item.url)
              : business_license.push(item);
          });

          let production_license = []; //生产许可证
          that.production_license.map((item) => {
            item.url
              ? production_license.push(item.url)
              : production_license.push(item);
          });

          let gmp_certificate = []; //GMP证书
          that.gmp_certificate.map((item) => {
            item.url
              ? gmp_certificate.push(item.url)
              : gmp_certificate.push(item);
          });

          let production_approval = []; //生产批件
          that.production_approval.map((item) => {
            item.url
              ? production_approval.push(item.url)
              : production_approval.push(item);
          });

          let quality_standard = []; //质量标准
          that.quality_standard.map((item) => {
            item.url
              ? quality_standard.push(item.url)
              : quality_standard.push(item);
          });

          let manual = []; //	说明书
          that.manual.map((item) => {
            item.url ? manual.push(item.url) : manual.push(item);
          });

          let pack_box = []; //包装盒
          that.pack_box.map((item) => {
            item.url ? pack_box.push(item.url) : pack_box.push(item);
          });

          let inspection_report = []; //质检报告
          that.inspection_report.map((item) => {
            item.url
              ? inspection_report.push(item.url)
              : inspection_report.push(item);
          });

          let trademark_certificate = []; //商标注册证
          that.trademark_certificate.map((item) => {
            item.url
              ? trademark_certificate.push(item.url)
              : trademark_certificate.push(item);
          });

          let logo = []; //logo
          that.logo.map((item) => {
            item.url ? logo.push(item.url) : logo.push(item);
          });

          let image = []; //商品图片
          that.image.map((item) => {
            item.url ? image.push(item.url) : image.push(item);
          });

          let video = []; //商品视频
          that.video.map((item) => {
            item.url ? video.push(item.url) : video.push(item);
          });

          // if(!form.cateId || !form.cateId.length){
          //   showError('请选择分类！')
          //   return
          // }
          let params = {
            // bar_code: form.bar_code,
            // batch_no: form.batch_no,
            // cate_pid: form.cateId[0],
            // cate_id: form.cateId[1]?form.cateId[1]:0,
            // cate_sid: form.cateId[2]?form.cateId[2]:0,
            // title: form.title,
            // brand_id: form.brand_id,
            // code: form.code,
            // synopsis: form.synopsis,
            // sell_point: form.sell_point,
            // drug_type: form.drug_type,
            // category: form.category.join(","),
            // meter_spec: form.meter_spec,
            // medium_pack_spec: form.medium_pack_spec,
            // spec_unit: form.spec_unit,
            // spec_volume: form.spec_volume,
            // base_type: form.base_type,
            // business_scope: form.business_scope.join(","),
            // special_request: form.special_request.join(","),
            // recipe_type: form.recipe_type,
            // approval_no: form.approval_no,
            // manufacturer: form.manufacturer,
            // dosage_form: form.dosage_form,
            // is_gmp: form.is_gmp,
            // production_unit: form.production_unit,
            // approval_date: form.approval_date,
            // generic_name: form.generic_name,
            // standard_code: form.standard_code,
            // production_address: form.production_address,
            // pinyin_initial: form.pinyin_initial,
            rate: form.rate,

            // desc: form.desc,
            // pack_list: form.pack_list,
            // after_service: form.after_service,
            // smart_tag: form.smart_tag,

            // production_date: form.production_date,
            // expire_date: form.expire_date,

            // production_license_date: form.production_license_date,
            // production_approval_date: form.production_approval_date,
            // inspection_report_date: form.inspection_report_date,
            // trademark_certificate_date: form.trademark_certificate_date,

            // business_license: business_license.join(","),
            // production_license: production_license.join(","),
            // gmp_certificate: gmp_certificate.join(","),
            // production_approval: production_approval.join(","),
            // quality_standard: quality_standard.join(","),
            // manual: manual.join(","),
            // pack_box: pack_box.join(","),
            // inspection_report: inspection_report.join(","),
            // trademark_certificate: trademark_certificate.join(","),

            // logo: logo.join(","),
            // image: image.join(","),
            // video: video.join(','),
            // type:1,

            sku_list: JSON.stringify(skuList),
            sale_price:form.sale_price,
            primary_price:form.primary_price,
            cost_price:form.cost_price,

            commission_rate:form.commission_rate,

            store_id:user.identityId,
            product_id:that.goodsId,
            sale_manager_rate:form.sale_manager_rate,
            sale_reps_rate:form.sale_reps_rate,
            full_reduce_limit:form.full_reduce_limit,
            full_reduce_amount:form.full_reduce_amount,
            discount_desc:form.discount_desc,


            // buy_limit:form.buy_limit
          };
          // if (that.goodsId) {
          //   //编辑
          //   params.id = that.goodsId;
          //   let res = await ShopGoodsEdit(params);
          //   if (res.data.code == 1) {
          //     showSuccess("保存成功");
          //     that.$router.back(1);
          //     that.$refs.ruleForm.resetFields();
          //   } else {
          //     showError(res.data.msg);
          //   }
          // } else {
            //新增
            let res = await ShopGoodsAdd(params);
            console.log(res,'提交res');
            if (res.data.code == 1) {
              showSuccess("添加成功");
              that.$router.back(1);
              that.$refs.ruleForm.resetFields();
            } else {
              showError(res.data.msg);
            }
          // }
        } else {
          showError("表单数据未完善！");
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.editable-row-operations a {
  margin-right: 12px;
}

.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(0, 158, 238, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .MainTopActionOne {
          margin-right: 30px;

          span {
            margin-right: 20px;
          }
        }

        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }

      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}

.formBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}
.ant-form-item {
  display: flex;
  width: 100%;
}
.business {
  .ant-checkbox-group {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.5rem;
    background: #f9f9f9;
  }
}

.skuBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}

.goodsAttribute {
  margin-top: 80px;
}

.qualiBox {
  margin-top: 80px;
}

.goodsImgBox {
  margin-top: 80px;
}
.btnBox {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
</style>